<template>
  <div class="personal-container">
    <!-- 左侧导航 -->
    <div class="side-nav">
      <el-card class="user-card">
        <!-- 用户信息区 -->
        <div class="user-profile">
          <el-avatar :size="160" :src="user.img" class="user-avatar">
            <template #error>
              <div class="avatar-error">
                <el-icon :size="60"><UserFilled /></el-icon>
              </div>
            </template>
          </el-avatar>

          <!-- 上传头像 -->
          <el-upload
              class="avatar-uploader"
              :http-request="uploadImg"
              :show-file-list="false"
              accept="image/png, image/jpeg"
          >
            <el-button type="primary" round class="mt-4">
              <el-icon class="mr-2"><Upload /></el-icon>
              更换头像
            </el-button>
          </el-upload>
        </div>

        <!-- 导航菜单 -->
        <el-menu
            :default-active="activeMenu"
            class="nav-menu"
            @select="handleMenuSelect"
        >
<!--          <el-menu-item index="/health/personage/myInfo">-->
<!--            <el-icon><User /></el-icon>-->
<!--            <span>个人信息</span>-->
<!--          </el-menu-item>-->
          <el-menu-item index="/health/personage/myArticles">
            <el-icon><Document /></el-icon>
            <span>我的文章</span>
          </el-menu-item>
          <el-menu-item index="/health/personage/updatePsw">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </div>

    <!-- 右侧内容 -->
    <div class="main-content">
      <router-view>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  Upload,
  User,
  Document,
  Lock
} from '@element-plus/icons-vue'
import { uploadAvatar } from '@/api/articleApi'
import { updateImgApi } from '@/api/login'

const router = useRouter()
const route = useRoute()

// 响应式状态
const user = reactive({
  img: '',
  ...JSON.parse(localStorage.getItem('healthUser') || '{}')
})
const loading = ref(false)

// 计算当前激活菜单
const activeMenu = computed(() => route.path)

// 生命周期钩子
onMounted(() => {
  if (!user.img) {
    user.img = '/default-avatar.png' // 默认头像
  }
})

// 菜单选择处理
const handleMenuSelect = (path) => {
  router.push(path)
}

// 上传头像
const uploadImg = async ({ file }) => {
  try {
    loading.value = true
    ElMessage({ message: '正在上传头像...', type: 'info' })

    const formData = new FormData()
    formData.append('file', file)

    // 上传请求
    const uploadRes = await uploadAvatar(formData)
    const newAvatar = `/img/system/download?fileName=${uploadRes.data}`

    // 更新用户信息
    const updateRes = await updateImgApi(newAvatar)
    user.img = updateRes.data

    // 更新本地存储
    const localUser = JSON.parse(localStorage.getItem('healthUser'))
    localUser.img = updateRes.data
    localStorage.setItem('healthUser', JSON.stringify(localUser))

    ElMessage.success('头像更新成功')
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '上传失败，请检查文件格式和大小（不超过5MB）')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.personal-container {
  display: flex;
  background: #f5f7fa;
  height: 100%;
}

.side-nav {
  width: 280px;
  flex-shrink: 0;
  padding: 20px;
}

.user-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}

.user-avatar {
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.avatar-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  color: #909399;
}

.nav-menu {
  border-right: none;
  :deep(.el-menu-item) {
    height: 56px;
    font-size: 16px;
    margin: 6px 0;
    border-radius: 8px;
    transition: all 0.3s;

    &.is-active {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }

    &:hover {
      background: var(--el-color-primary-light-9);
    }

    .el-icon {
      font-size: 20px;
      margin-right: 12px;
    }
  }
}

.main-content {
  background: #fff;
  border-radius: 12px 0 0 12px;
  box-shadow: -2px 0 12px rgba(0,0,0,0.05);
  width: 80%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>